<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>学生</title>
  <link rel="stylesheet" href="./bootstrap/bootstrap.min.css" />
  <link rel="stylesheet" href="./bootstrap/bootstrap-icons.css" />
  <link rel="stylesheet" href="./css/common.css" />
  <link rel="stylesheet" href="./css/student.css" />
</head>

<body class="application application-offset">
  <div class="container-fluid container-application">
    <div class="sidenav show" id="sidenav-main">
      <!-- Sidenav header -->
      <div class="sidenav-header d-flex align-items-center">
        <a class="navbar-brand" href="./index.html">
          <span class="logo">·ITCAST·</span>
        </a>
      </div>
      <!-- User mini profile -->
      <div class="sidenav-user d-flex flex-column align-items-center justify-content-between text-center">
        <!-- Avatar -->
        <div>
          <a href="#" class="avatar rounded-circle avatar-xl">
            <img alt="Image placeholder" src="https://yanxuan-item.nosdn.127.net/8b27deb1670c53e67c42ca3e1ed6fd12.jpg"
              class="" />
          </a>
          <div class="mt-5">
            <h5 class="mb-0 text-white">黑马前端</h5>
            <span class="d-block text-sm text-white opacity-8 mb-3">数据可视化</span>
            <a href="javascript:;" class="btn btn-sm btn-white btn-icon rounded-pill shadow hover-translate-y-n3">
              <span class="btn-inner--text">学前端来黑马</span>
            </a>
          </div>
        </div>
      </div>
      <!-- Application nav -->
      <div class="nav-application clearfix">
        <a href="./index.html" class="btn btn-square text-sm">
          <span class="btn-inner--icon d-block"><i class="bi bi-house bi-2x"></i></span>
          <span class="btn-inner--icon d-block pt-2">首页</span>
        </a>
        <a href="./student.html" class="btn btn-square text-sm active">
          <span class="btn-inner--icon d-block"><i class="bi bi-people bi-2x"></i></span>
          <span class="btn-inner--icon d-block pt-2">学生</span>
        </a>
        <a href="javascript:;" class="btn btn-square text-sm">
          <span class="btn-inner--icon d-block"><i class="bi bi-columns bi-2x"></i></span>
          <span class="btn-inner--icon d-block pt-2">排版</span>
        </a>
        <a href="javascript:;" class="btn btn-square text-sm">
          <span class="btn-inner--icon d-block"><i class="bi bi-files bi-2x"></i></span>
          <span class="btn-inner--icon d-block pt-2">资料</span>
        </a>
        <a href="javascript:;" class="btn btn-square text-sm">
          <span class="btn-inner--icon d-block"><i class="bi bi-receipt bi-2x"></i></span>
          <span class="btn-inner--icon d-block pt-2">就业</span>
        </a>
        <a href="javascript:;" class="btn btn-square text-sm">
          <span class="btn-inner--icon d-block"><i class="bi bi-gear bi-2x"></i></span>
          <span class="btn-inner--icon d-block pt-2">设置</span>
        </a>
      </div>
      <!-- Misc area -->
      <div class="card bg-gradient-warning">
        <div class="card-body">
          <h5 class="text-white">哈喽, 朋友!</h5>
          <p class="text-white mb-4">
            为什么不现在开始学习前端，创造一些令人惊叹的东西呢？
          </p>
          <a href="http://itcast.cn" class="btn btn-sm btn-block btn-white rounded-pill" target="_blank">Get started</a>
        </div>
      </div>
    </div>
    <div class="main-content position-relative">
      <nav class="navbar navbar-main navbar-expand-lg navbar-dark navbar-border" id="navbar-main">
        <div class="container-fluid">
          <!-- Navbar nav -->
          <div class="collapse navbar-collapse navbar-collapse-fade" id="navbar-main-collapse">
            <ul class="navbar-nav align-items-lg-center">
              <!-- Home  -->
              <li class="nav-item">
                <a class="nav-link pl-lg-0" href="./index.html"> 首页 </a>
              </li>
              <li class="nav-item">
                <a class="nav-link pl-lg-0" href="./index.html"> 传智教育 </a>
              </li>
              <li class="nav-item">
                <a class="nav-link pl-lg-0" href="./index.html">
                  黑马程序员
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link pl-lg-0" href="./index.html"> 文档 </a>
              </li>
            </ul>
            <!-- Right menu -->
            <ul class="navbar-nav ml-lg-auto align-items-center d-none d-lg-flex">
              <li class="nav-item dropdown dropdown-animate">
                <a class="nav-link pr-lg-0" href=".dropdown-menu" role="button" data-toggle="dropdown"
                  aria-haspopup="true" aria-expanded="false">
                  <div class="media media-pill align-items-center">
                    <span class="avatar rounded-circle">
                      <img alt="Image placeholder"
                        src="https://yanxuan-item.nosdn.127.net/8b27deb1670c53e67c42ca3e1ed6fd12.jpg" />
                    </span>
                    <div class="ml-2 d-none d-lg-block">
                      <span class="mb-0 text-sm font-weight-bold">Admin</span>
                    </div>
                  </div>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link pl-lg-0" id="logout" href="javascript:;">
                  退出
                </a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
      <div class="page-content">
        <div class="page-title mb-3">
          <div class="row justify-content-between align-items-center">
            <div class="col-md-6 mb-3 mb-md-0">
              <h5 class="h3 font-weight-400 mb-0 text-white">Students</h5>
              <span class="text-sm text-white opacity-8">一共有 <b class="total">0</b> 位学员</span>
            </div>
            <div class="col-md-6 d-flex align-items-center justify-content-between justify-content-md-end">
              <a id="openModal" href="javascript:;" class="btn btn-sm btn-white btn-icon-only rounded-circle ml-4">
                <span class="btn-inner--icon"><i class="bi bi-plus bi-2x"></i></span>
              </a>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <div class="card card-fluid">
              <div class="table-responsive" style="min-height: 1000px">
                <table class="table align-items-center">
                  <thead>
                    <tr>
                      <th>姓名</th>
                      <th>年龄</th>
                      <th>性别</th>
                      <th>组号</th>
                      <th>期望薪资</th>
                      <th>就业薪资</th>
                      <th>籍贯</th>
                      <th>操作</th>
                    </tr>
                  </thead>
                  <tbody class="list"></tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
        <!-- footer -->
        <div class="footer pt-5 pb-4 footer-light" id="footer-main">
          <div class="row text-center text-sm-left align-items-sm-center">
            <div class="col-sm-6">
              <p class="text-sm mb-0">
                © 2022
                <a href="https://itcast.cn" class="h6 text-sm" target="_blank">前端学科</a>. All rights reserved.
              </p>
            </div>
            <div class="col-sm-6 mb-md-0">
              <ul class="nav justify-content-center justify-content-md-end">
                <li class="nav-item">
                  <a class="nav-link" href="#">Support</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Terms</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link pr-0" href="#">Privacy</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- add Modal -->
  <div class="modal fade" id="modal">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">添加学员</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form id="form" class="g-3 row" autocomplete="off" novalidate>
            <div class="col-sm-6">
              <div class="form-group">
                <label class="input-group-label">姓名：</label>
                <input type="text" name="name" class="form-control" placeholder="请输入姓名" />
              </div>
            </div>
            <div class="col-sm-6">
              <div class="form-group">
                <label class="input-group-label">性别：</label>
                <div class="input">
                  <div class="form-check d-inline-block">
                    <input value="0" checked id="cb01" class="form-check-input" type="radio" name="gender" />
                    <label for="cb01" class="form-check-label">男</label>
                  </div>
                  <div class="form-check d-inline-block">
                    <input value="1" id="cb02" class="form-check-input" type="radio" name="gender" />
                    <label for="cb02" class="form-check-label">女</label>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-6">
              <div class="form-group">
                <label class="input-group-label">年龄：</label>
                <input type="text" name="age" class="form-control" placeholder="请输入年龄" />
              </div>
            </div>
            <div class="col-sm-6">
              <div class="form-group">
                <label class="input-group-label">组号：</label>
                <input type="text" name="group" class="form-control" placeholder="请输入1-8组号" />
              </div>
            </div>
            <div class="col-sm-6">
              <div class="form-group">
                <label class="input-group-label">期望薪资：</label>
                <input type="text" name="hope_salary" class="form-control" placeholder="请输入期望薪资" />
              </div>
            </div>
            <div class="col-sm-6">
              <div class="form-group">
                <label class="input-group-label">就业薪资：</label>
                <input type="text" name="salary" class="form-control" placeholder="请输入就业薪资" />
              </div>
            </div>
            <div class="col-sm-12">
              <div class="form-group">
                <label class="input-group-label">籍贯：</label>
                <div class="input pl-0">
                  <select class="form-select custom-select" name="province">
                    <option value="">--省份--</option>
                  </select>
                  <select class="form-select custom-select" name="city">
                    <option value="">--城市--</option>
                  </select>
                  <select class="form-select custom-select" name="area">
                    <option value="">--地区--</option>
                  </select>
                </div>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
            取消
          </button>
          <button type="button" class="btn btn-blue" id="submit">确认</button>
        </div>
      </div>
    </div>
  </div>
  <script src="./bootstrap/bootstrap.min.js"></script>
  <script src="./lib/axios.js"></script>
  <script src="./lib/form-serialize.js"></script>
  <script src="./js/common.js"></script>
  <script>
    // ------------- 获取学员信息 -------------

    // 1.抽取获取数据的方法
    async function getStudents() {
      const res = await axios({
        url: '/students'
      })
      // console.log('res:', res)
      document.querySelector('.list').innerHTML = res.data
        .map(v => {
          return `
                     <tr>
                      <td>${v.name}</td>
                      <td>${v.age}</td>
                      <td>${v.gender === 0 ? '男' : '女'}</td>
                      <td>第${v.group}组</td>
                      <td>${v.hope_salary}</td>
                      <td>${v.salary}</td>
                      <td>${v.province + v.city + v.area}</td>
                      <td>
                        <a href="javascript:;" class="text-success mr-3"><i data-id="${v.id
            }" class="bi bi-pen"></i></a>
                        <a  href="javascript:;" class="text-danger"><i data-id="${v.id
            }" class="bi bi-trash"></i></a>
                      </td>
                    </tr>
          `
        })
        .join('')

      // 设置学生的个数
      document.querySelector(".total").innerHTML = res.data.length
    }

    window.onload = function () {
      getStudents()
      // ------------- 2. 删除 -------------
      // 委托绑定事件
      document
        .querySelector('.list')
        .addEventListener('click', async function (e) {
          // 判断 是否有这个类名 true/false
          if (e.target.classList.contains('bi-trash')) {
            // 点了删除
            // console.log('删除')
            // 获取id
            const id = e.target.dataset.id
            // console.log('id:', id)
            // 调用接口
            await axios({
              url: `/students/${id}`,
              method: 'delete'
            })
            // console.log('res:', res)
            alert('删掉啦!')
            // 更新页面
            getStudents()
          }
        })

      // 3. 弹框
      const modal = new bootstrap.Modal(document.querySelector('#modal'))
      // 1. 点击 添加/ 编辑 弹框
      document.querySelector('#openModal').onclick = async function () {
        // 修改标题
        document.querySelector('.modal-title').innerHTML = '添加学员'
        // 保存 data-id=add
        document.querySelector('#submit').dataset.id = 'add'

        // 清空表单
        document.querySelector("#form").reset()
        // 重置市区
        await renderCity()
        await renderArea()


        modal.show()
      }
      // 点击修改弹窗
      document.querySelector('tbody').addEventListener('click', async function (e) {
        if (e.target.classList.contains('bi-pen')) {
          document.querySelector('.modal-title').innerHTML = '修改学员'
          const id = e.target.dataset.id
          // console.log('id:', id)
          document.querySelector('#submit').dataset.id = id
          // 获取学院信息
          const res = await axios({
            url: `/students/${id}`
          })
          // 修改弹窗的内容
          for (const key in res.data) {
            const ipt = document.querySelector(`[name=${key}]`)
            // console.log('ipt:', ipt)
            // 获取到了元素再去设置value 否则会报错
            // 有一些属性对应的元素不存在
            // name=gender 不能设置value 需要设置checked属性
            if (key !== "gender") {
              ipt !== null && (ipt.value = res.data[key])
            } else {
              // key=gender--->checked
              // 男 0 女 1
              const genders = document.querySelectorAll("[name=gender]")
              // 根据索引 勾选对应的性别即可
              console.log('genders[res.data[key]]:', genders[res.data[key]]);
              genders[res.data[key]].checked = true
            }
          }
          // 重新去获取 对应的市 和 区的数据
          await renderCity(res.data.city)
          await renderArea(res.data.area)

          // 弹框
          modal.show()
        }

      })

      // 提交按钮的点击事件
      document.querySelector('#submit').onclick = async function () {
        if (this.dataset.id === 'add') {
          // 新增
          // console.log('新增逻辑')
          const data = serialize(document.querySelector("#form"), { hash: true })

          for (const key in data) {
            // 判断 是否为数字-->转换
            // isNaN 不是数字-->true 是数字(字符串)-->false
            if (isNaN(data[key]) === false) {
              // 需要转换
              data[key] = +data[key]
            }
          }

          // console.log('data:', data)
          const res = await axios({
            url: '/students',
            method: 'post',
            data // data:data
          })
          // console.log('res:', res)
          modal.hide()
          // alert('更新成功!')
          tip("更新成功")
          getStudents()
        } else {
          // 修改
          // console.log('修改逻辑')
          // 获取数据
          const data = serialize(document.querySelector("#form"),{hash:true})
          // console.log(data);
          const id = this.dataset.id

          for(const key in data) {
             // isNaN--false --是数字
              // isNaN--true --不是数字
            if (isNaN(data[key]) === false) {
               data[key] = +data[key]
              
            }
          }
          // 调用接口
           await axios ({
            url: `/students/${id}`,
            method:"put",
            data,
          })

          alert("修改成功")
          modal.hide()
          getStudents()
        }
      }

      // 初始获取省市区数据
      // 获取省数据
      async function renderProvince(province = '') {
        // 省
        const res = await axios({
          url: "/api/province"
        })
        // console.log("res", res);
        document.querySelector("[name=province]").innerHTML = res.data
          .map(v => {
            return `<option value="${v}">${v}</option>`
          }).join("")
        province !== '' &&
          (document.querySelector('[name=province]').value = province)
      }

      // 获取市数据
      async function renderCity(city = '') {
        // 默认 北京 被选中
        const pname = document.querySelector("[name=province]").value

        const res = await axios({
          url: "/api/city",
          params: {
            pname // pname pname
          }
        })
        console.log("res", res);

        document.querySelector("[name=city]").innerHTML = res.data
          .map(v =>
            `<option value="${v}">${v}</option>`)
          .join("")
        city !== '' && (document.querySelector('[name=city]').value = city)
      }

      // 获取区数据
      async function renderArea(area = '') {
        // 获取省 获取市
        const pname = document.querySelector("[name= province]").value
        // console.log(("pname", pname));
        const cname = document.querySelector("[name=city]").value
        // console.log("cname", cname);

        const res = await axios({
          url: "/api/area",
          params: {
            pname,
            cname,
          }
        })
        console.log("res",res);
        document.querySelector("[name=area]").innerHTML = res.data
          .map(v => `<option value="${v}">${v}</option>`)
          .join("")
        // 如果传入了 area 选中对应的area
        // select 设置了value之后,选中对应的option
        area !== "" && (document.querySelector("[name=area]").value = area)
      }

      // 省市区
      async function renderSelect() {
        await renderProvince()
        await renderCity()
        await renderArea()
      }
      // 初始获取一下数据
      renderSelect()

      // 省市区联动
      document.querySelector("[name=province]").onchange = async function () {
        // 重新获取 市
        await renderCity()
        // 重新获取 区
        await renderArea()

      }
      document.querySelector("[name=city]").onchange = async function () {
        // 重新获取区
        await renderArea()
      }
    }

  </script>
</body>

</html>